<template>
  <div class="appointment">
    <div class="nav-bar-wrap">
      <van-nav-bar  title="预约会议" right-text="完成" left-arrow @click-left="onClickLeft" @click-right="ok" />
    </div>
    <van-cell-group class="group0">
      <van-field v-model="title" placeholder="会议名称(必填)" @blur="blurEvent(3)"/>
    </van-cell-group>
    <van-cell-group class="group">
      <van-cell class="required-icon" title="开始时间" is-link arrow-direction="right" :value="beginData" @click="openDate" />
      <van-cell class="required-icon hairline" title="会议时长" is-link arrow-direction="right" :value="`${timeLength[0]}${timeLength[1]}`" @click="openLength"/>
      <van-cell class="hairline van-hairline" title="会议带宽" is-link arrow-direction="right" :value="`${netData}kps`" @click="openNet" />
      <van-switch-cell class="hairline van-hairline" v-model="checkedCycle" title="周期会议" @change="changeBool('checkedCycle')"/>
      <van-cell  class="hairline"  v-show="checkedCycle" title="重复" is-link arrow-direction="right" :value="cycleData" @click="goWeek" />
    </van-cell-group>
    <van-cell-group class="group">
      <van-cell  class="hairline van-hairline" title="会议详情" is-link arrow-direction="right" :value="detailsData" @click="enterDetails" />
      <van-cell title="参会人员" is-link arrow-direction="right" :value="peopleData" @click="goList"/>
      <van-cell title="参会终端" is-link arrow-direction="right" :value="`${deviceData}台`" @click="openDevice" />
    </van-cell-group>

    <van-cell-group class="group">
      <van-cell class="required-icon1" title="选择云会议室" is-link arrow-direction="right" :value="cloudData" @click="goCloud"/>
      <van-cell title="入会密码" class="">
        <input type="text" placeholder="未设置" class="input-ele" v-model="password1" @blur="blurEvent(1)">
      </van-cell>
      <van-cell title="会控密码" class="">
        <input type="text" placeholder="未设置" class="input-ele" v-model="password2" @blur="blurEvent(2)">
      </van-cell>
    </van-cell-group>
    
    <van-cell-group class="group">
      <van-switch-cell class="hairline van-hairline" v-model="autoCall" title="会议开始时自动呼叫终端" @change="changeBool('autoCall')"/>
      <van-switch-cell v-model="autoViedo" title="会议开始时自动录制视频" @change="changeBool('autoViedo')"/>
    </van-cell-group>
    <van-cell-group>
</van-cell-group>
    <van-actionsheet v-model="showDate">
      <van-datetime-picker v-model="currentDate" type="datetime" :min-date="minDate" :max-date="maxDate" @confirm="sureDate" @cancel="closeDate" />
    </van-actionsheet>
    <van-actionsheet v-model="showNetwook">
      <van-picker show-toolbar :columns="columns" @cancel="closeNet" @confirm="sureNet" />
    </van-actionsheet>
    <van-actionsheet v-model="showDevice">
      <van-picker show-toolbar :columns="deviceColumns" @cancel="closeDevice" @confirm="sureDevice" />
    </van-actionsheet>
    <van-actionsheet v-model="showLength">
      <van-picker show-toolbar :columns="timeColumns" @cancel="closeLength" @confirm="sureLength" />
    </van-actionsheet>
  </div>
</template>

<script>
import {
  Icon,
  Cell,
  CellGroup,
  Toast,
  SwitchCell,
  Field,
  Actionsheet,
  DatetimePicker,
  Picker,
  NavBar
} from 'vant'
import dayjs from 'dayjs'
import local from '../../service/local.service.js'
const hours = {
  values: ['1小时','2小时','3小时','4小时','5小时','6小时','7小时','8小时','9小时','10小时']
}
const minutes = {
  values: ['0分钟','10分钟','20分钟','30分钟','40分钟','50分钟']
}
export default {
  data() {
    return {
      username:'',
      cloudData:'',
      timeLength:['1小时','0分钟'],
      deviceData: '',
      peopleData: '',
      detailsData: '',
      cycleData: '',
      beginData: dayjs().format('YYYY-MM-DD HH:mm'),
      netData: '0',
      columns: ['100', '200', '300', '400', '500'],
      deviceColumns: ['1', '2', '3', '4', '5'],
      timeColumns:[hours,minutes],
      password1: '',
      password2: '',
      minHour: 10,
      maxHour: 20,
      minDate: new Date(),
      maxDate: new Date(2019, 10, 1),
      currentDate: new Date(),
      title: '',
      checkedCycle: false,
      autoCall: false,
      autoViedo: false,
      showDate: false,
      showNetwook: false,
      showDevice: false,
      showLength: false,
    }
  },
  components: {
    [Icon.name]: Icon,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [SwitchCell.name]: SwitchCell,
    [Field.name]: Field,
    [Actionsheet.name]: Actionsheet,
    [DatetimePicker.name]: DatetimePicker,
    [Picker.name]: Picker,
    [NavBar.name]: NavBar
  },
  methods: {
    changeBool(val){
      if(val === 'autoCall'){
        this.storeData('isCall',this.autoCall)
      }
      if(val === 'autoViedo'){
        this.storeData('isVideo',this.autoViedo)
      }
      if(val === 'checkedCycle'){
        this.storeData('isCycle',this.checkedCycle)
      }
    },
    blurEvent(num){
     if(num === 1){
       this.storeData('password1',this.password1)
     }
     if(num === 2){
       this.storeData('password2',this.password2)
     }
     if(num === 3){
       this.storeData('title',this.title)
     }
    },
    onClickLeft(){
      this.$router.push({name:'home'})
    },
    ok(){
      //提交数据,清空local
      local.remove('editData')
      this.$router.push({name:'home'})
    },
    enterDetails() {
      this.$router.push({ name: 'edit-details' })
    },
    goWeek() {
      this.$router.push({ name: 'week-list' })
    },
    goList(){
      this.$router.push({ name: 'choose-list' })
    },
    goCloud(){
      this.$router.push({ name: 'choose-cloud' })
    },
    openLength(){
      this.showLength = true
    },
    openDate() {
      this.showDate = true
    },
    openNet() {
      this.showNetwook = true
    },
    closeDate() {
      this.showDate = false
    },
    closeLength(){
      this.showLength = false
    },
    sureLength(value, index){
      console.log(value)
      this.timeLength = value
      this.storeData('timeLength', this.timeLength)
      this.showLength = false
    },
    sureNet(value, index) {
      this.netData = value
      this.storeData('net', this.netData)
      this.closeNet()
    },
    closeNet() {
      this.showNetwook = false
    },
    storeData(localField,nowField){
      let editData = local.get('editData') || ''
      editData[localField] = nowField
      local.set('editData',editData)
    },
    sureDate() {
      let temp = dayjs(this.currentDate).format('YYYY-MM-DD HH:mm')
      this.beginData = temp
      this.storeData('beginDate',this.beginData)
      this.showDate = false
    },
    openDevice() {
      this.showDevice = true
    },
    closeDevice() {
      this.showDevice = false
    },
    sureDevice(value, index) {
      this.deviceData = value
      this.storeData('deviceNum',this.deviceData)
      this.closeDevice()
    },
    initData(){
      let editData = local.get('editData') || ''
      if(editData){
        this.title = editData.title
        this.beginData = editData.beginDate
        this.timeLength = editData.timeLength
        this.netData = editData.net
        this.checkedCycle = editData.isCycle
        if(editData.weekList && editData.weekList!==0){
          let str = ''
          editData.weekList.forEach(element => {
            str += element.num
          });
          this.cycleData = str
          this.checkedCycle = true
        }else{
          this.cycleData = ''
          this.checkedCycle = false
        }
        this.detailsData = editData.meetingDetail
        this.peopleData = editData.peolpeNum
        this.deviceData = editData.deviceNum
        this.cloudData = editData.cloudRoom
        this.password1 = editData.password1
        this.password2 = editData.password2
        this.autoCall = editData.isCall
        this.autoViedo = editData.isVideo
      }else{
        console.log('首次进入')
        let options = {
          title: '',
          beginDate: '',
          timeLength: ['1小时','0分钟'],
          net:'0',
          isCycle: false,
          weekList:[],
          cycleWeek: '',
          meetingDetail: '',
          peolpeNum: '0',
          deviceNum: '0',
          cloudRoom: '',
          password1: '',
          password2:'',
          isCall: false,
          isVideo: false
        }
        local.set('editData', options)
      }     
    }
  },
  mounted(){
   this.initData()
  }
}
</script>

<style scoped lang="less">
.appointment {
  padding: 0 0 10px 0;
  .required-icon::before{
    content: '*';
    position: absolute;
    left: 75px;
    font-size: 12px;
    color: #FF605C;
  }
  .required-icon1::before{
    content: '*';
    position: absolute;
    left: 100px;
    font-size: 12px;
    color: #FF605C;
  }
  .hairline::after{
    left: 12px;
    right: 0;
    width: auto;
    -webkit-transform: scale(1,.5);
    transform: scale(1,.5);
    border-bottom-width: 1px;
  }
  .group0{
    margin-top: 65px;
  }
  .group {
    margin-top: 20px;
  }
  //van-hairline--top-bottom
  .input-ele {
    width: 100%;
    text-align: right;
    outline: none;
    background: none;
    border: 0px;
  }
}
</style>